<template>
  <div>
    <Chart :cdata="cdata" :label="label" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  props: {
    dateRange: {
      type: Array,
      default: () => []
    },
    metric: {
      type: String,
      default: () => ''
    },
    dataList: {
      type: Array,
      default: () => []
    },
    shops: {
      type: Array,
      default: () => []
    },
    dic: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      label: '数量',
      drawTiming: null,
      cdata: {
        year: null,
        weekCategory: [],
        radarData: [],
        radarDataAvg: [],
        maxData: 12,
        weekMaxData: [],
        weekLineData: [],
        series: []
      }
    }
  },
  components: {
    Chart,
  },
  mounted () {
    this.setData();
  },
  methods: {
    dayDif(date1, date2) {
      return Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
    },
    setData () {
      // 清空轮询数据
      this.cdata.weekCategory = [];
      this.cdata.weekMaxData = [];
      this.cdata.weekLineData = [];
      this.cdata.radarData = [];
      this.cdata.radarDataAvg = [];
      this.cdata.legend = this.shops.map(item => item.value)
      this.cdata.series = []

      this.dic.map(item => {
        if (item.value === this.metric) {
          this.label = item.label
        }
      })

      const startTime = this.dateRange[0]
      const endTime = this.dateRange[1]
      const betweenDays = this.dayDif(new Date(startTime), new Date(endTime))

      const resData = this.dataList
      this.cdata.year = startTime.split('-')[0];


      for (let i = 0; i < betweenDays; i++) {
        const date = new Date(endTime)
        date.setTime(date.getTime() - 3600 * 1000 * 24 * i);
        // 日期
        const year = date.getFullYear()
        const month = date.getMonth() <= 8 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
        const dateTime = date.getDate() <= 9 ? (('0' + date.getDate())) : date.getDate()
        const dateStr = `${year}-${month}-${dateTime}`
        this.cdata.weekCategory.unshift(dateStr)
      }

      this.shops.forEach(shop => {
        const seriesItem = {
          name: shop.value,
          type: 'line',
          smooth: true,
          symbol: 'emptyCircle',
          symbolSize: 8,
          data: [],
          lineSmooth: true,
          tooltip: {
            position: 'top',
            formatter: '{c}',
            backgroundColor: 'rgba(28,152,232,.2)',
            padding: 6
          }
        }


        for (let i = 0; i < betweenDays; i++) {
          const date = new Date(endTime)
          date.setTime(date.getTime() - 3600 * 1000 * 24 * i);
          // 日期
          const year = date.getFullYear()
          const month = date.getMonth() <= 8 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
          const dateTime = date.getDate() <= 9 ? (('0' + date.getDate())) : date.getDate()
          const dateStr = `${year}-${month}-${dateTime}`

          let count = 0
          resData.forEach(item => {
            let date = item.date
            if (dateStr === date && item.shopId === shop.id) {
              count += item[this.metric]
            }
          })

          if (this.cdata.maxData < count) {
            this.cdata.maxData = count
          }
          this.cdata.weekMaxData.push(this.cdata.maxData);
          seriesItem.data.push(count);
        }
        this.cdata.series.push(seriesItem)
      })
      console.log(this.cdata)
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
